<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spu</title>
    <script src="../static/vue.min.js"></script>

    <script src="../elements/element.js"></script>
    <link rel="stylesheet" href="../elements/element.css">

    <script src="../static/axios.min.js"></script>
</head>

<body >
<div id="app">
    <div id="attrvaluesdiv" style="display: none">
    <el-row >
<el-col :span="24">
<el-card class="box-card" style="width:80%;margin:20px auto">

    <el-tabs :tab-position="'left'">
        <el-tab-pane :label="group.attr_group_name" v-for=" (group,left) in resultAttrValues">
            <el-form   :label-position="'top'"   label-width="80px">
                <el-form-item v-for="(groupAttrs,right) in group.pms_product_attr_values" :label="groupAttrs.attr_name">
                    <el-input v-model="resultAttrValues[left].pms_product_attr_values[right].attr_id" v-show="false"  :value="groupAttrs.attr_id"></el-input>

                    <el-input v-model="resultAttrValues[left].pms_product_attr_values[right].attr_value"></el-input>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>

    <div style="margin:auto">

        <el-button type="success" @click="updateattrvalues" style="margin-top: 12px; float: right">点击修改</el-button>
    </div>


</el-card>
</el-col>
    </el-row>
    </div>

<div class="layui-form layui-row"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class=" layui-col-md2">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <select id="catalog" name="catalog_id" lay-filter="aihao">
                <option value=""></option>
                <option v-for="category in resultCategory" :value="category.cat_id">{{category.name}}</option>
            </select>
        </div>
    </div>
    <div class=" layui-col-md2">
        <label class="layui-form-label">品牌</label>
        <div class="layui-input-block">
            <select id="brand" name="brand_id" lay-filter="aihao">
                <option value=""></option>
                <option v-for="brand in resultBrand" :value="brand.brand_id">{{brand.name}}</option>
            </select>
        </div>
    </div>

    <div class=" layui-col-md2">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select id="publishStatus" name="publish_status" lay-filter="aihao">
                <option value=""></option>
                <option value="0">下架</option>
                <option value="1">上架</option>
                <option value="2">新增</option>
            </select>
        </div>
    </div>
    <div class=" layui-col-md3">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" id="spuName" name="" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class=" layui-col-md3">
        <div class="layui-input-block">
            <button class="layui-btn" id="searchSpu" ><i class="layui-icon layui-icon-search"></i></button>

        </div>
    </div>
</div>
    <div class="layui-row">
        <table id="spuTab" class="layui-col-md12" lay-filter="toolfilter"></table>
    </div>

</div>
</body>
<script src="../static/global.js"></script>
<script>
    let spuVue=new Vue({
        el:'#app',
        data:{
            resultBrand:[],
            resultCategory:[],
            resultAttrValues:[],
            updateAttrValues:[],//修改传的值
        },
        created(){
          this.findAllCategoryAndBrand()
        },
        methods:{

            findAllCategoryAndBrand(){
                axios.get(glodate.serverZuul+"product/categoryandbrand").then(x=>{
                    this.resultBrand=x.data.data.pms_brandList;//spu下的全部品牌
                    this.resultCategory=x.data.data.pms_categoryList;//spu下的全部分类
                })
            },
            submitclick(id){
                axios.get(glodate.serverZuul+"product/findproductAttrValuesBySpuId?spuId="+id).then(x=>{
                    console.log(x.data.data)
                   this.resultAttrValues=x.data.data//全部属性和值
                })
            },
            updateattrvalues(){

                //转换数据
                this.resultAttrValues.forEach(item=>{
                       item.pms_product_attr_values.forEach(result=>{

                         if(result!=null){
                             this.updateAttrValues.push(result)
                         }
                       })
                })
                //发送请求
                axios.put(glodate.serverZuul+"product/putProductByValues",this.updateAttrValues).then(x=>{
                    if(x.data.code==200){
                        alert("成功");
                    }
                })

            }
        }
    })





    layui.use(['form','layer','table'],function (){
        let form=layui.form;
        let layer=layui.layer;
        let $=layui.$;
        let table=layui.table;

        table.render({
             id:'allSpuTabId'
            ,elem: '#spuTab'
            ,height: 312
            ,url: glodate.serverZuul+"product/findAllSpu" //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'spu_name', title: '商品名称', width:80}
                ,{field: 'spu_description', title: '商品描述', width:80, sort: true}
                ,{field: 'catalog_id', title: '所属分类id', width:80}
                ,{field: 'brand_id', title: '品牌id', width: 177}
                ,{field: 'weight', title: '重量', width: 80, sort: true}
                ,{field: 'publish_status', title: '上架状态', width: 80, sort: true,templet(d){
                    if(d.publish_status==1){
                        return '<span class="layui-badge layui-bg-orange">上架</span>'
                    }else if(d.publish_status==0){
                        return '<span class="layui-badge layui-bg-black">下架</span>'
                    }else if(d.publish_status==2){
                        return '<span class="layui-badge layui-bg-blue">新增</span>'
                    }else{
                        return '<span class="layui-badge">异常状态</span>'
                    }
                    }}
                ,{field: 'create_time', title: '创建时间', width: 80}
                ,{field: 'update_time', title: '修改时间', width: 135, sort: true}
                ,{ title: '操作', width: 155, sort: true,templet:'#operateSpu'}
            ]]
        });

        //监听工具条
        table.on('tool(toolfilter)',function (obj) {
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            let attrId=data.attr_id;

            if (layEvent == "exit") {
                console.log(data);
                Swal.fire({
                    icon:'warning',
                    title:'商品上下架操作',
                    text:"点击上架进行上架操作，下架进行下架操作",
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: '上架',
                    showCancelButton: true,
                    cancelButtonColor: '#d33',
                    cancelButtonText: "下架"
                }).then((x)=>{
                    if(x.value){
                        if(data.publish_status==1){
                            layer.alert("当前已经是上架状态");
                        }else{
                            $.ajax({
                                url:glodate.serverZuul+"product/putSpuByStatus",
                                method:'put',
                                data:{'id':data.id,'publish_status':1},
                                dataType:'json',
                                success:function (res){
                                    if(res.code==200){
                                        Swal.fire({
                                            title:'上架成功',
                                            text:'点击确定刷新页面',
                                            icon:'success',
                                            confirmButtonText: '确定'
                                        }).then((x)=>{
                                            if(x){
                                                location.reload();
                                            }
                                        })
                                    }else {
                                        Swal.fire({
                                            title:''+res.msg+'',
                                            text:'请稍后再试',
                                            icon:'warning',
                                        })
                                    }
                                }
                            })
                        }
                    }else{
                        if(data.publish_status==0){
                            layer.alert("当前已经是下架状态");
                        }else{
                            $.ajax({
                                url:glodate.serverZuul+"product/putSpuByStatus",
                                method:'put',
                                data:{'id':data.id,'publish_status':0},
                                dataType:'json',
                                success:function (res){
                                    if(res.code==200){
                                        Swal.fire({
                                            title:'下架成功',
                                            text:'点击确定刷新页面',
                                            icon:'success',
                                            confirmButtonText: '确定'
                                        }).then((x)=>{
                                            if(x){
                                                location.reload();
                                            }
                                        })
                                    }else {
                                        Swal.fire({
                                            title:''+res.msg+'',
                                            text:'请稍后再试',
                                            icon:'warning',
                                        })
                                    }
                                }
                            })
                        }
                    }
                })

            }else if(layEvent == "attr"){
                spuVue.submitclick(data.id);

                layer.open({
                    type:1,
                    content:$('#attrvaluesdiv'),
                    area:['1500px','600px'],
                    title:'正在修改规格参数'
                })

            }
        })

        //搜索
        $('#searchSpu').on('click',function (){
            let spu_name=$('#spuName').val();
            let brand_id=$('#brand').val();
            let catalog_id=$('#catalog').val();
            let publish_status=$('#publishStatus').val();
            table.reload('allSpuTabId', {
                where: {
                    'spu_name':spu_name,
                    'brand_id':brand_id,
                    'catalog_id':catalog_id,
                    'publish_status':publish_status
                } //设定异步数据接口的额外参数
                //,height: 300
            });

            return false;
        })
    })

</script>
<script type="text/html" id="operateSpu">
    <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="exit" value="上下架">
    <input type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="attr" value="规格">
</script>
</html>